<template>
    <div :id="chartsId" :style="{width: '900px', height: '700px'}" class="my-chart"></div>
</template>

<script>
require('echarts/map/js/china');
export default {
  props: ['chartsId', 'data', 'val', 'name', 'children'],
  data(){
      return {}
  },
  mounted(){
      this.desc();
  },
  watch: {
      data(){
          this.desc();
      }
  },
  methods:{
      desc(){
				let self = this;
				let val = this.val;
					let timeFlag = 'discounts_benpin_' + val[0];
					let time = this.data[timeFlag].date;
					let data = this.data;
					let name = this.name;
        function randomData() {
            return Math.round(Math.random()*1000);
        }
				let myChart4 = this.$echarts.init(document.getElementById(this.chartsId));
          myChart4.setOption({
						title: {
                text: '优惠地图',
                left: 'center'
            },
            tooltip : {
								trigger: 'item',
								//鼠标hover显示内容
								formatter:function(params){
										return params.seriesName + '<br/>' + params.name + ' : ' + params.value + '万';
								}
						},
						visualMap: {
							max: function(){
								let first = 'discounts_benpin_' + val[0];
								let item = data[first].dataList[0];
								let flag = data[first].dataList[0].length;
								if (flag == 0){
									first = 'discounts_jingpin_' + val[1];
									item = data[first].dataList[0];
									flag = data[first].dataList[0].length;
								}
								if (flag == 0){
									first = 'discounts_jingpin_' + val[2];
									item = data[first].dataList[0];
									flag = data[first].dataList[0].length;
								}
								if (flag == 0){
									first = 'discounts_jingpin_' + val[3];
									item = data[first].dataList[0];
									flag = data[first].dataList[0].length;
								}
								if (flag == 0){
									first = 'discounts_jingpin_' + val[4];
									item = data[first].dataList[0];
									flag = data[first].dataList[0].length;
								}
							  item.sort(compare('value'));
								function compare(prop){
									return function(a,b){
										var value1 = a[prop];
										var value2 = b[prop];
										return value2 - value1;
									}
								}
								return item[0].value;
							}(),
							min: 0,
							left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默认为数值文本
                calculable: true,
                inRange: {
                    color: ['#eee', '#6ba7e4'],
                },
                outOfRange: {
                    color: '#333'
                },
                controller: {
                    inRange:{}
                }
						},
						toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
						legend: {
								orient: 'horizontal',
								left: 'left',
								data: function(){
									let list = [];
									for(let i = 0; i < val.length; i++){
										let item = name[i];
										list.push(item);
									}
									return list;
								}(),
								selected: function(){
									let obj = {};
									for(let i = 0; i < val.length; i++){
										obj[name[i]] = false;
										if(i == 0) obj[name[i]] = true;
									}
									return obj;
								}(),
            },
						series: function(){
							let arr = [];
							let productId;
							for(let i = 0; i < val.length; i++){
								let obj = {};
								if(i == 0) {
									productId = 'discounts_benpin_' + val[i];
								}else{
									productId = 'discounts_jingpin_' + val[i];
								}
								obj.name = name[i];
								obj.stack = 'a' + i;
								obj.data = data[productId].dataList[0];
								obj.type = 'map';
								obj.mapType = 'china';
								obj.roam = false;
								obj.label = {
									normal: {
											show: true
									},
									emphasis: {
											show: true
									}
								};
								obj.itemStyle = {
									emphasis: {
											areaColor: '#389BB7'
									}
								};
								arr.push(obj);
							}
							return arr;
						}()
					})
        myChart4.on('legendselectchanged', function(obj) {
            var selected = obj.selected;
            var legend = obj.name;
            
            for(var i in selected){
                if(i == legend){
                    selected[i] = true;
                }else{
                    selected[i] = false;
                }
            }
            myChart4.setOption({
                legend:{
                    selected: selected
                }
            })
        });
        myChart4.on('click', function(params){
					console.log(params.name);
					console.log(self.val);
					$.ajax({
              url: 'gz/getRelaProvinceDisCounts',
              data: {
							  province: params.name,
							  typeId: self.val
							},
							traditional: true,
              success: function(data){
								console.log('data: ', data);
								data.name = params.name;
								self.$emit('upup', data)
              },
              error: function(error){
								console.log('error: ', error);
              }
          })
      })
      }
  }
}
</script>
